<template>
    <w-tabs :items="tabs" card v-if="studentId != null">
        <template #item-title.1="{ item }">
            <div class="title3">
                <el-icon :size="20">
                    <Edit />
                </el-icon>

                <span class="bule">
                    {{ item.title }}
                </span>
            </div>
        </template>
        <template #item-title.2="{ item }">
            <div class="title3">
                <el-icon>
                    <Tickets />
                </el-icon>

                <span class="bule">
                    {{ item.title }}
                </span>
            </div>
        </template>
        <template #item-title.3="{ item }">
            <div class="title3">
                <el-icon>
                    <Document />
                </el-icon>
                <span class="bule">
                    {{ item.title }}
                </span>
            </div>
        </template>

        <template #item-content.1>
            <div class="content3">
                <!-- 未具有报名资格提示页面 -->
                <div class="not-admit" v-if="examState == 0">
                    <div class="error-page">
                        <div class="error-box">
                            <div class="error-code"><el-icon color="#FFA500">
                                    <CircleCloseFilled />
                                </el-icon></div>
                            <div class="error-desc">啊哦~ 你还没有获得报名资格哦
                                <hr>
                                <w-alert warning>请先完成相关考前学习内容</w-alert>
                            </div>
                            <div class="error-handle">
                                <el-button type="info" size="large">返回首页</el-button>

                                <el-button type="warning" size="large" @click="goToLearningSite">前往学习网站</el-button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 报名页面 -->
                <div class="admit" v-else-if="examState == 1">
                    <el-steps :active="activeStep">
                        <el-step title="确认个人信息" description="请仔细核实"></el-step>
                        <el-step title="填写报名信息" description="请注意考试时间"></el-step>
                        <el-step title="报名成功" description="请阅读考试信息"></el-step>
                    </el-steps>
                    <el-card>
                        <!-- 步骤内容 -->
                        <div v-if="activeStep === 1">
                            <!-- 确认个人信息表单 -->
                            <el-form ref="formRef" :model="studentForm" label-width="120px" label-position="left">
                                <el-row :gutter="50">
                                    <el-col :span="15">
                                        <el-form-item label="姓名">
                                            <el-input v-model="studentForm.studentName" readonly></el-input>
                                        </el-form-item>
                                        <el-form-item label="年龄">
                                            <el-input v-model="studentForm.studentAge" readonly :min="18" :max="100" />
                                        </el-form-item>
                                        <el-form-item label="性别">
                                            <el-select v-model="studentForm.studentSex" disabled placeholder="请选择">
                                                <el-option key="男" label="男" value="男"></el-option>
                                                <el-option key="女" label="女" value="女"></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="联系方式">
                                            <el-input v-model="studentForm.studentPhone" readonly></el-input>
                                        </el-form-item>
                                        <el-form-item label="身份证">
                                            <el-input v-model="studentForm.studentIdentityId" readonly></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-col :span="24">
                                    <el-form-item>
                                        <el-checkbox v-model="checkAll">
                                            个人信息核实完毕
                                        </el-checkbox>
                                        <!-- 使用 el-tooltip 包裹按钮来显示提示信息 -->
                                        <el-tooltip v-if="!checkAll" content="请先勾选确认个人信息核实完毕" placement="top">
                                            <el-button style="margin-left: 20%;" type="primary" :disabled="!checkAll"
                                                @click="activeStep = 2">下一步</el-button>
                                        </el-tooltip>
                                        <!-- 当复选框被勾选时，正常显示按钮 -->
                                        <el-button v-else style="margin-left: 20%;" type="primary"
                                            @click="activeStep = 2">下一步</el-button>
                                    </el-form-item>

                                </el-col>
                            </el-form>
                        </div>
                        <div v-else-if="activeStep === 2">
                            <!-- 填写报名信息表单 -->
                            <el-form ref="formRef" :model="studentForm" label-width="150px" label-position="left">
                                <el-row :gutter="50">
                                    <el-col :span="15">
                                        <el-form-item label="请选择考试时间：">
                                            <el-date-picker v-model="examInfo.date"></el-date-picker>
                                        </el-form-item>
                                        <el-form-item label="报考的驾驶证类型：">
                                            <el-input v-model="studyProcess.application.licence.licenceType"
                                                readonly></el-input>
                                        </el-form-item>
                                        <el-form-item label="报考的科目：">
                                            <el-input v-model="studyProcess.subject.subjectType" readonly />
                                        </el-form-item>
                                        <el-form-item label="请选择考试地点">
                                            <el-input v-model="examInfo.place"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-col :span="24">
                                    <el-form-item>
                                        <el-button style="margin-left: 25%;" type="primary"
                                            @click="activeStep = 1">上一步</el-button>
                                        <w-confirm lg bg-color="success" style="margin-left: 7%;" class="ma4"
                                            cancel="取消" confirm="确认" @cancel="$waveui.notify('取消报名.', 'info')"
                                            @confirm=confirmSign
                                            :tooltip="{ label: '确认报名?', bgColor: 'success', top: true, transition: 'twist' }">
                                            报名
                                            <template #question>
                                                确定要报名这场考试吗?
                                            </template>
                                        </w-confirm>
                                    </el-form-item>

                                </el-col>
                            </el-form>
                        </div>
                        <div v-else-if="activeStep === 3">
                            <!-- 报名成功提示 -->
                            <el-result :title="'报名成功！'" :sub-title="'您的报名信息已确认。'" icon="el-icon-success"></el-result>
                            <el-card class="form-card">
                                <h4>考试报名信息:</h4>
                                <br>
                                <el-form ref="formRef" :model="studentForm" label-width="120px" label-position="left">
                                    <el-row :gutter="50">
                                        <el-col :span="15">
                                            <el-form-item label="姓名">
                                                <el-input v-model="studentForm.studentName" readonly></el-input>
                                            </el-form-item>
                                            <el-form-item label="联系方式">
                                                <el-input v-model="studentForm.studentPhone" readonly></el-input>
                                            </el-form-item>
                                            <el-form-item label="身份证">
                                                <el-input v-model="studentForm.studentIdentityId" readonly></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-col :span="24">
                                        <el-col :span="15">
                                            <el-form-item label="考试时间：">
                                                <el-date-picker readonly
                                                    v-model="currentExam.examTime"></el-date-picker>
                                            </el-form-item>
                                            <el-form-item label="驾驶证类型：">
                                                <el-input readonly v-model="currentExam.licence.licenceType"></el-input>
                                            </el-form-item>
                                            <el-form-item label="报考科目：">
                                                <el-input readonly v-model="currentExam.subject.subjectType" />
                                            </el-form-item>
                                            <el-form-item label="准考证号">
                                                <el-input readonly v-model="currentExam.examId"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-col>
                                </el-form>
                            </el-card>
                        </div>
                    </el-card>
                </div>

                <!-- 查看考试结果页面 -->
                <div class="already" v-else-if="examState == 2">
                    <div class="error-page">
                        <div class="error-box">
                            <div class="error-code"><el-icon color=gab(29,194,165)>
                                    <Management />
                                </el-icon></div>
                            <div class="error-desc">您的考试结果已经出来了！
                                <hr>
                                <w-alert success>点击“当前考试”可前往查看结果</w-alert>
                            </div>
                            <el-col :span="24">
                                <el-form-item>
                                    <el-button v-show="hasNextExam" style="margin-left: 70%;" type="success"
                                        @click="signNextExam()">报名下一场</el-button>
                                </el-form-item>
                            </el-col>
                        </div>
                    </div>
                    <el-result title="您已成功报名" description="感谢您的参与，祝您考试顺利！" icon="el-icon-success"></el-result>
                </div>
            </div>
        </template>
        <template #item-content.2>
            <div class="content3">
                <el-card>
                    <div style="margin: 0% 20%;">
                        <el-form ref="formRef" :model="studentForm" label-width="150px" label-position="left">
                            <el-row :gutter="50">
                                <el-col :span="15">
                                    <el-form-item label="姓名：">
                                        <span>{{ currentExam.student.studentName }}</span>
                                    </el-form-item>
                                    <el-form-item label="身份证号：">
                                        <span>{{ currentExam.student.studentIdentityId }}</span>
                                    </el-form-item>
                                    <el-form-item label="考试编号：">
                                        <span>{{ currentExam.examId }}</span>
                                    </el-form-item>
                                    <el-form-item label="考试时间：">
                                        <span> {{ currentExam.examTime }}</span>
                                    </el-form-item>
                                    <el-form-item label="驾驶证类型：">
                                        <span>{{ currentExam.licence.licenceType }}</span>
                                    </el-form-item>
                                    <el-form-item label="报考的科目：">
                                        <span>{{ currentExam.subject.subjectType }}</span>
                                    </el-form-item>
                                    <el-form-item label="考试成绩">
                                        <span>{{ currentExam.examScore }}</span>
                                        <el-tag v-if="currentExam.examScore && currentExam.examScore >= 90"
                                            size="large">合格</el-tag>
                                        <el-tag v-else-if="currentExam.examScore && currentExam.examScore < 90"
                                            style="color: red;" size="large">不合格</el-tag>
                                        <el-tag v-else size="large">暂无成绩</el-tag>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-col :span="24">
                                <el-form-item>
                                    <el-button style="margin-left: 50%;" type="primary"
                                        @click="printExamResult()">打印成绩</el-button>
                                </el-form-item>

                            </el-col>
                        </el-form>
                    </div>
                </el-card>
            </div>
        </template>
        <template #item-content.3>
            <div class="content3">
                <exam-table v-if="studentId != null"></exam-table>
                <div v-else>
                    <div class="error-page">
                        <div class="error-box">
                            <div class="error-code"><el-icon color="#FFA500">
                                    <CircleCloseFilled />
                                </el-icon></div>
                            <div class="error-desc">啊哦~ 找不到你的个人信息
                                <hr>
                                <w-alert warning>请完善个人信息或联系管理员</w-alert>
                            </div>
                            <div class="error-handle">
                                <el-button type="info" size="large">返回首页</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>

    </w-tabs>
    <div v-else>
        <div class="error-page">
            <div class="error-box">
                <div class="error-code"><el-icon color="#FFA500">
                        <CircleCloseFilled />
                    </el-icon></div>
                <div class="error-desc">啊哦~ 找不到你的个人信息
                    <hr>
                    <w-alert warning>请完善个人信息或联系管理员</w-alert>
                </div>
                <div class="error-handle">
                    <el-button type="info" size="large">返回首页</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="forms">
import { onMounted } from "vue";
import { ref } from 'vue';
import examTable from '@/views/pages/examTable.vue'
import { ElMessage, FormInstance } from "element-plus";
import * as studentApi from '@/api/student';
import * as licenceApi from '@/api/licence';
import * as processApi from '@/api/process';
import * as examApi from '@/api/exam';
const tabs = [
    { title: '考试报名', content: 'Tab 1 content.' },
    { title: '当前考试', content: 'Tab 2 content.' },
    { title: '考试记录', content: 'Tab 3 content.' }
]
const storedStudentInfo = localStorage.getItem("studentInfo");
const studentId = ref(JSON.parse(storedStudentInfo).studentId);

const formatAppTime = (cellValue) => {
    // 自定义处理数据的逻辑
    // 例如，将日期格式化为 yyyy-MM-dd
    const date = new Date(cellValue);
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
}

//考试资格
const examState = ref(0); // 根据实际情况设置
const goToLearningSite = () => {
    window.open('https://www.jiakaobaodian.com/', '_blank');
};

//考试报名
const examInfo = ref({
    date: Date,
    place: '',
});
const studyProcess = ref();
const activeStep = ref(1); // 当前步骤
const checkAll = ref(false);
const hasNextExam = ref(true);
const checkExamMes = ref(false);

//当前考试
const currentExam = ref();

// 定义初始的空对象
let studentForm: studentApi.studentItemData = {
    studentId: 0,
    studentName: '',
    studentIdentityId: '',
    studentSex: '男',
    studentAge: 18,
    studentPhone: ''
};
const getProcess = async () => {
    const response = await processApi.getDataByStudentId(studentId.value);
    studyProcess.value = response.data.data.findByStudentID;
    if (studyProcess.value.progressState == "不合格") {
        examState.value = 2;
    } else if (studyProcess.value.progressState == "合格") {
        examState.value = 2;
        if (studyProcess.value.subjectId == 4) {
            hasNextExam.value = false;
        }
    } else if (studyProcess.value.progressState == "无资格") {
        examState.value = 0;
    } else if (studyProcess.value.progressState == "未报名") {
        examState.value = 1;
        activeStep.value = 1;
    } else if (studyProcess.value.progressState == "已报名") {
        examState.value = 1;
        activeStep.value = 3;
    }
    console.log(studyProcess.value);
}
const confirmSign = async () => {
    const newExam = {
        examId: '',
        examScore: '',
        licenceId: studyProcess.value.application.licence.licenceId,
        subjectId: studyProcess.value.subject.subjectId,
        studentId: studentId.value,
        appTime: formatAppTime(new Date()),
        examTime: examInfo.value.date,
    }
    activeStep.value = 3;
    console.log(newExam);
    const response = await examApi.studentSignExam(newExam as unknown as examApi.examItemData);
    console.log(response);

}
//当前考试
const printExamResult = () => {
    console.log("dayincji");
}

const initStudentForm = () => {
    studentForm = (JSON.parse(storedStudentInfo));
    console.log(studentForm);
};
const initCurrentExam = async () => {
    const response = await examApi.findNewExam(studentId.value);
    currentExam.value = response.data.data.findNewExam;
}


//报名下一场考试
const signNextExam = async () => {
    if (studyProcess.value.progressState != '合格') {
        studyProcess.value.progressState = '未报名';
    } else {
        studyProcess.value.subjectId = studyProcess.value.subjectId + 1;
        studyProcess.value.progressState = '无资格';
    }
    const response = await processApi.updateProgress(studyProcess.value);
    // examState.value = 0, activeStep.value = 1;
    getProcess();
    console.log(response);
}
onMounted(() => {
    if ((JSON.parse(storedStudentInfo).studentId) != null) {
        initStudentForm();
        getProcess();
        initCurrentExam();
    } else {
        ElMessage.warning('未找到个人信息！');
    }
});

</script>

<style scoped>
.not-admit,
.admit,
.already {
    margin: 20px;
}

.error-page {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    background: #eef0fc;
    box-sizing: border-box;
}

.error-box {
    width: 400px;
    background-color: #fff;
    padding: 80px 50px;
    border-radius: 5px;
}

.error-code {
    line-height: 1;
    font-size: 100px;
    font-weight: bold;
    color: var(--el-color-primary);
    margin-bottom: 20px;
    text-align: center;
}

.error-desc {
    font-size: 20px;
    color: #777;
    text-align: center;
}

.error-handle {
    margin-top: 50px;
    text-align: center;
}

.error-btn {
    margin-left: 100px;
}

.form-card {
    margin: auto;
}
</style>